<template>
  <div class="page-layout">
    <f-form-layout
      @ValidateFailed="onValidateFailed"
      class="mb20"
      ref="form"
      layout="horizontal"
      :model="model"
      :columns="columns"
      @submit="submit">
      <f-button htmlType="submit">htmlFor提交</f-button>
      <!-- 不要使用 ，使用导出resetFields函数-->
      <!-- <f-button htmlType="reset">Reset</f-button> -->
    </f-form-layout>

    <f-button type="primary" @click="handleForm">手动调用提交</f-button>
    <!-- 重置model到初始状态 -->
    <f-button class="ml20" @click="reset">Reset</f-button>
  </div>
</template>

<script setup lang="ts">
import { Tag } from 'ant-design-vue';
import { h, watch, ref } from 'vue';
const outside = ref(1);
const form = ref();
const label = ref(1);
const model = ref({
  name: '呵呵',
  obj: {
    sub: {}
  }
});
const columns = ref([
  {
    label: '基础信息',
    columns: [
      {
        span: 6,
        label: label.value,
        field: 'obj.a',
        type: 'input'
      },
      { span: 6, label: 'name1', field: 'obj.b', type: 'input' },
      {
        span: 6,
        label: '字段3',
        field: 'obj.sub.a',
        type: 'input',
        extra: '字段2等于100时隐藏',
        required: true,
        show: (data) => data.name1 != 100
      },
      {
        span: 6,
        label: '字段4',
        field: 'name3',
        type: 'input',
        tooltip: 'tooltip',
        extra: '字段2等于100时必填',
        show: (data) => data.name1 % 100 == 0,
        required: (data) => data.name1 == 100
      },
      { span: 6, label: '字段', field: 'name4', type: 'input' },
      {
        span: 6,
        label: '字段',
        field: 'name5',
        type: 'input',
        props: { placeholder: '请选择，，，，', disabled: false },
        extra: 'disabled,placeholder，可覆盖统一操作'
      },
      {
        span: 6,
        label: () => h('div', 'vnode'),
        field: 'name6',
        type: 'input',
        extra: (data) => {
          return h('div', '字段2显示什么我就显示什么：' + data.name1);
        }
      }
    ]
  },
  {
    label: '分组1-100',
    span: 24,
    columns: [
      {
        type: 'checkbox',
        span: 6,
        field: 'ok1',
        label: '字段1',
        valueKey: 'checked',
        tooltip: '你好哈垃圾分类开始的减肥流口水的解放路口时大飞机雷克萨就',
        slots: {
          default: () => 'fsdafsdf'
        }
      },
      {
        type: 'input',
        span: 6,
        field: 'ok2',
        label: '字段1'
      },
      { type: 'input', span: 6, field: 'ok3', label: '字段1' },
      { type: 'input', span: 6, field: 'ok4', label: '字段1' }
    ]
  },

  {
    label: '分组2',
    span: 24,
    columns: [
      {
        label: '分组2',
        span: 12,
        columns: [
          { label: '字段1', field: 'a1a', type: 'input', span: 12 },
          { label: '字段1', field: 'a2a', type: 'input', span: 12 },
          { label: '字段1', field: 'a3a', type: 'input', span: 12 }
        ]
      },
      {
        label: '分组2',
        span: 12,
        columns: [
          { label: '字段1', field: 'aa1', type: 'input', span: 12 },
          { label: '字段1', field: 'aa2', type: 'input', span: 12 },
          { label: '字段1', field: 'aa3', type: 'input', span: 12 }
        ]
      }
    ]
  },
  {
    label: '接近真实',
    columns: [
      { field: 'name', label: '机构名称', required: true },
      { field: 'simpleName', label: '公司简称', required: true },
      { field: 'english', label: '英文名' },
      { field: 'uscrDP', label: '统一社会信息代码' },
      {
        field: 'dates',
        label: '起止日期',
        type: 'date-range',
        props: { format: 'YYYY-MM-DD', valueFormat: 'YYYY-MM-DD', placeholder: ['起', '止'] }
      },
      {
        field: 'code',
        type: 'select',
        label: '机构编码',
        props: {
          query: () => {
            console.log('outside 改变 query将自动执行一次');
            return Promise.resolve([{ label: outside.value || '无数据', value: 1 }]);
          }
        }
      },
      {
        field: 'institutionType',
        label: '机构类型',
        type: 'dictionary',
        props: { code: 'ZZJGLB' }
      },
      {
        field: 'registerType',
        label: '登记注册类型',
        type: 'dictionary',
        props: { code: 'DJZCLXDM' }
      },
      { field: 'industry', label: '经营行业', type: 'dictionary', props: { code: 'SSHYDM' } },
      { field: 'registerCapital', label: '注册资本（金）', type: 'input-number' },
      { field: 'businessScope', label: '经营或业务范围' },
      { field: 'affiliation', label: '隶属关系', type: 'dictionary', props: { code: 'DWLSGXDM' } },
      { field: 'regionalismCode', label: '行政区划', type: 'region-tree' },
      { field: 'addrRegister', label: '单位注册地址' },
      { field: 'postCodeDP', label: '邮政编码' },
      { field: 'contactTelDP', label: '联系电话' },
      { field: 'mailbox', label: '邮箱' },
      { field: 'domain', label: '网址' },
      { field: 'legalName', label: '企业法人代表' },
      { field: 'legalIdType', label: '证件类型', type: 'dictionary', props: { code: 'SFZJLBDM' } },
      { field: 'legalIdCard', label: '证件号' },
      {
        field: 'establishedDate',
        label: '成立日期',
        type: 'date-picker',
        props: { format: 'YYYY-MM-DD', valueFormat: 'YYYY-MM-DD' }
      },
      {
        field: 'toDate',
        label: '有效期至',
        type: 'date-picker',
        props: { format: 'YYYY-MM-DD', valueFormat: 'YYYY-MM-DD' }
      },
      { field: 'signOrg', label: '登记批准机构' },
      {
        field: 'approvalNo',
        label: '批准文号或注册号',
        extra: (data) => (data.isBranch ? 'true' : null)
      },
      { field: 'isBranch', label: '启动二级院区', type: 'switch', valueKey: 'checked' }
    ]
  }
]);
function onValidateFailed(e) {
  console.error('errors:', e);
}
function submit(data) {
  console.log(data);
  console.log(form.value?.getExistFieldsValue());
}
async function handleForm() {
  const value = await form.value?.validate();
  console.log(value);
}
function reset() {
  model.value = {
    isBranch: true,
    approvalNo: '23423423423'
  };
}
</script>

<style lang="scss">
body {
  background: #f5f5f5;
}
.page-layout {
  background: #f5f5f5;
  .formlayout-group {
    background: #ffffff;
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 8px;
  }
}
</style>
